﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>slot给定name属性改变插槽顺序</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<h1>slot给定name属性改变插槽顺序</h1><br/>

<div id="app">
    {{name}}<br/>
    <modal>
        <h4 slot="content"><span>我是名称叫content的内容，主要用于打乱顺序,注意在组件中定义插槽的时候title定义在现在这个content内容前面，所以title名称的插槽会先插入</span></h4>
        <h3 slot="title">我是一个写上插槽名称的内容,名称叫title</h3>
        <span>不指定slot名称,则都是default</span>
        <p>我是没写slot名称的内容，这段内容将完全放入到default里</p>
        <p>再写一段内容，只要不写插槽名称，它也是default里的内容</p>
        <h4 slot="content">我是写了插槽名称的内容，在组件中位置在default后面，所以在这里放入的时候也是在它后面</h4>
    </modal>

    <br />
    <p><span>最后总结:slot的作用是定制模板</span></p>
    <modal>

    </modal>
</div>

<template id="modal">
    <div>
        <!--想改变顺序还有只是某一部分对应插槽内容，则写上对应的插槽名称-->
        <slot name="title"></slot>
        <!--slot中可以放置一些默认内容，如果传递了内容则所有内容全替换掉-->
        <slot name="default"></slot>
        <slot name="content"></slot>
    </div>
</template>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    let modal = {
        template:'#modal'
    }

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据'
        },
        components:{
            modal
        }
    });
</script>

</body>
</html>